import React, { useCallback, useContext, useState } from "react";

import { useAppSelector, useAppDispatch } from "../../app/hooks";
import { decrement, increment, incrementByAmount, incrementAsync, incrementIfOdd, selectCount, saveModelFormAsync } from "./counterSlice";
import styles from "./Counter.module.css";
import { SaveModelFormContext } from "modelForm/SaveModelFormContext";
import { CommonFormTypes } from "globalConstants";
import { Button } from "antd";

export function Counter() {
  const saveModelFirstClose = false;
  const { showSaveForm } = useContext(SaveModelFormContext);
  const modelInfoLoading = useAppSelector((state) => state.counter.modelInfoLoading);
  const modelInfo = useAppSelector((state) => state.counter.modelInfo);
  const count = useAppSelector(selectCount);
  const status = useAppSelector((state) => state.counter.status);
  const dispatch = useAppDispatch();
  const [incrementAmount, setIncrementAmount] = useState("2");

  const incrementValue = Number(incrementAmount) || 0;

  const save = useCallback(
    (resolve?, values = {}) => {
      dispatch(saveModelFormAsync({ resolve, ...values }));
    },
    [dispatch]
  );

  const onSave = useCallback(() => {
    console.log("counter 调用showSave");
    showSaveForm({
      type: CommonFormTypes.Add,
      visible: true,
      onSave: (value, onClose) => {
        console.log(value);
      },
    });
  }, [showSaveForm]);
  const onSave1 = useCallback(() => {
    showSaveForm({
      type: CommonFormTypes.Add,
      visible: true,
      onSave: (value, onClose) => {
        console.log(value);
        if (saveModelFirstClose) {
          // 会先关闭，再执行保存
          dispatch(saveModelFormAsync(value));
          onClose();
        } else {
          // dispatch(saveModelFormAsync(value));
          save(onClose, value);
        }
      },
    });
  }, [dispatch, save, saveModelFirstClose, showSaveForm]);

  return (
    <div>
      <div>模型名称：{modelInfo?.modelName || "无数据"}</div>

      <div className={styles.row}>
        <button className={styles.button} aria-label="Decrement value" onClick={() => dispatch(decrement())}>
          -
        </button>

        <span className={styles.value}>{count}</span>

        <button className={styles.button} aria-label="Increment value" onClick={() => dispatch(increment())}>
          +
        </button>
      </div>
      {status === "failed" && "【Async add failed: don't add 2】"}
      <div className={styles.row}>
        <input
          className={styles.textbox}
          aria-label="Set increment amount"
          value={incrementAmount}
          onChange={(e) => setIncrementAmount(e.target.value)}
        />
        <button className={styles.button} onClick={() => dispatch(incrementByAmount(incrementValue))}>
          Add Amount
        </button>
        <button className={styles.asyncButton} onClick={() => dispatch(incrementAsync(incrementValue))}>
          {status === "loading" ? "Loading... " : ""} Add Async
        </button>
        <button className={styles.button} onClick={() => dispatch(incrementIfOdd(incrementValue))}>
          Add If Odd
        </button>

        <Button loading={modelInfoLoading} onClick={onSave}>
          保存模型
        </Button>
      </div>
    </div>
  );
}
